<template>
  <div class="teamSingle">
    <div class="title">仪表盘概览</div>
    <div class="partOne">
      <div class="partOneHeader">
        <div class="percent">产品项目阶段占比</div>
        <div class="select">
          <a-radio-group v-model="radioValue" @change="onChange">
            <a-radio-button value="1">全部</a-radio-button>
            <a-radio-button  value="2">我负责的</a-radio-button>
            <a-radio-button  value="3">我参与的</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <fixed-table :tableDate="tableDate"></fixed-table>
    </div>
    <div class="partTwo" style="height:220px;">
      <div class="chartFirst">
        <div class="chartTitle">项目健康度</div>
        <!-- <chart-box :chartData="healthStatusData" :id="'healthy'" :color="['#4ccb72','#fad336','#ff7978']" :allLength="allLength"></chart-box> -->
        <chart-box :chartData="healthStatusData" :id="'healthy'" :color="healthyColor" :allLength="allLength" :titleData="['项目数占比','健康度']"></chart-box>
      </div>
      <div class="chartSec">
        <div class="chartTitle">项目问题关闭情况</div>
        <chart-box-bar :id="'queClosed'" :barData="itemIssueClosedData"></chart-box-bar>
      </div>
    </div>
    <div class="partTwo partThree" style="height:220px;">
      <div class="chartFirst">
        <div class="chartTitle">本月节点占比</div>
       <chart-box :chartData="currentMonthTaskRateData" :id="'currentMonth'" :allLength="0" :titleData="['项目数占比','当月项目任务']" :color="currentMonthTaskRateColor"></chart-box>
      </div>
      <div class="chartFirst">
        <div class="chartTitle">规划项目立项情况</div>
        <chart-box :chartData="itemLxqkData" :id="'lxqk'" :color="itemLxqkColor" :titleData="['项目立项','项目规划']" :allLength="xmlxLength"></chart-box>
        <!-- <chart-box :chartData="healthStatusData" :id="'lxqk'"></chart-box> -->
      </div>
       <div class="chartFirst">
         <div class="chartTitle">项目大类分布情况</div>
         <chart-box :chartData="projectTypeData" :id="'projectType'" :allLength="allLength" :titleData="['项目数占比','项目大类']" :color="protypeColor"></chart-box>
      </div>
    </div>
  </div>
</template>
<script>
import chartBox from "./chartBox.vue";
import chartBoxBar from "./chartBoxBar.vue";
import FixedTable from './fixedTable.vue';
export default {
  name: "teamSingle",
  components: {
    chartBox,
    chartBoxBar,
    FixedTable
  },
  data() {
    return {
      tabType: "ALL",
      radioValue: '1',
      filterData: [], //项目列表数据筛除已结束等状态
      allLength: null,
      mangerLength: null,
      joinLength: null,
      fintableLength: null,
      tableDate: [],
      nodeTitle: [],
      chargeDate: [],
      partticipate: [],
      healthStatusData: [
      ], //健康状态
      healthyColor: ["#4ccb73","#ff7978","gray"],
      projectTypeData: [], //项目大类
      currentMonthTaskRateData: [
        {
          name: "已完成",
          value: 0,
          color: "#4ccb73"
        },
        {
          name: "未完成",
          value: 0,
          color: "#e2f2e8"
        }
      ],
      xmlxLength: 10,
      currentMonthTaskRateColor: [ "#4ccb73", "#e2f2e8"],
      currentMonthLength: null,
      protypeColor: ["#39A0FF","#37cbcb","#4ccb72","#fad336","#f3637c","#9760e2"],
      itemIssueClosedData: [],
      itemLxqkData: [
        {
          name: "待立项",
          value: 0,
        },
        {
          name: "执行中",
          value: 0,
        },
        {
          name: "已结项",
          value: 0,
        }
      ], //规划项目立项情况
      itemLxqkColor: ["#34ccc9","#3da0fe","#e2e2e2"],
    }
  },
  mounted() {
    this.onChange('1');
    this.getCurrentMonthTaskRateData();
    this.getHealth();
    this.getProjectTypeData();
    this.getClosed();
    this.protypeColor = this.protypeColor.concat(['#FDA085','#4CD0DD','#FBC2EB','#96E6A1','#E2EBF0','#FFB199','#C1C161'])
  },
  methods: {
    onChange(val) {
      this.radioValue = val.target ? val.target.value : '1'
      if(this.radioValue==1){
        this.tableDate = [{"name":"总体方案评审","percent":"0.05%","value":1,"length":130},{"name":"样机试验验证评审","percent":"0.05%","value":1,"length":160},{"name":"立项评审","percent":"0.05%","value":1,"length":100},{"name":"样机试制决策","percent":"0.05%","value":1,"length":130},{"name":"项目预算制定（系统内）","percent":"0.15%","value":3,"length":205},{"name":"null","percent":"0.10%","value":2,"length":70},{"name":"详细开发计划发制定（系统内）","percent":"0.05%","value":1,"length":250},{"name":"测试123123123","percent":"0.05%","value":1,"length":137.5}];
      }else if(this.radioValue==2){
        this.tableDate = [{"name":"项目预算制定（系统内）","percent":"7.14%","value":1,"length":205}]
      }else if(this.radioValue==3){
        this.tableDate = [{"name":"项目预算制定（系统内）","percent":"1.79%","value":1,"length":205},{"name":"null","percent":"1.79%","value":1,"length":70},{"name":"测试123123123","percent":"1.79%","value":1,"length":137.5}]
      }
    },
    getCurrentMonthTaskRateData() {
      // this.currentMonthTaskRateData = [{"name":"已完成","value":0,"color":"#4ccb73"},{"name":"未完成","value":0,"color":"#e2f2e8"}]
      this.currentMonthTaskRateData = []
      this.itemLxqkData = []
    },
    getHealth(){
      this.healthStatusData =[{"name":"绿灯","index":1,"color":"#4ccb73","value":15,"length":77.5},{"name":"红灯","index":3,"color":"#ff7978","value":6,"length":62.5},{"name":"灰灯","index":4,"color":"gray","value":1963,"length":122.5}]
      this.allLength = 1984;
    },
    getProjectTypeData(){
      this.projectTypeData = [{"name":"Project","value":78,"length":92.5},{"name":"产品开发项目","value":1305,"length":130},{"name":"研发能力提升项目","value":133,"length":160},{"name":"定型产品设计变更项目","value":16,"length":190},{"name":"制造工艺提升项目","value":141,"length":160},{"name":"对外合作项目","value":37,"length":130},{"name":"关键零部件开发项目","value":98,"length":175},{"name":"重品项目","value":54,"length":100},{"name":"技术研究与开发项目","value":46,"length":175},{"name":"软件开发项目","value":76,"length":130}];
      this.allLength = 1984;
    },
    getClosed(){
      this.itemIssueClosedData = [{"name":"重品项目","blue":59,"green":0,"yellow":0},{"name":"Project","blue":79,"green":0,"yellow":0},{"name":"技术研究与开发项目","blue":49,"green":0,"yellow":0},{"name":"软件开发项目","blue":75,"green":0,"yellow":5},{"name":"研发能力提升项目","blue":143,"green":0,"yellow":0},{"name":"制造工艺提升项目","blue":151,"green":0,"yellow":0},{"name":"关键零部件开发项目","blue":102,"green":0,"yellow":0},{"name":"定型产品设计变更项目","blue":16,"green":0,"yellow":0},{"name":"产品开发项目","blue":1395,"green":0,"yellow":2},{"name":"对外合作项目","blue":37,"green":0,"yellow":0}]
    },
  },
  
};
</script>
<style lang="less" scoped>
.teamSingle {
   height: 100%;
  //  overflow: hidden;
   width: 100%;
  // padding: 0 20px;
  // padding-top: 10px;
  .title {
    background-color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-radius: 4px;
  }
  .partOne {
    background: #fff;
    padding: 10px 0;
    border-radius: 4px;
    .partOneHeader {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      padding-bottom: 6px;
      margin-bottom: 10px;
      border-bottom: 1px solid #e7e7e7;
      .select {
        // width: 10vw;
        /deep/.ant-radio-button-wrapper-checked {
          background: #386bd7;
          color: #fff
        }
      }
      .percent {
        font-weight: 700;
        font-size: 14px;
        line-height: 32px;
      }
    }
    
  }
  .partTwo {
    margin-top: 10px;
    height: calc( 50% - 122px);
    // height: 300px;
    border-radius: 4px;
    .chartTitle {
      height: 36px;
      font-weight: 600;
      font-size: 14px;
      line-height: 36px;
      padding: 0 20px;
      border-bottom: 1px solid #e7e7e7;
    }
    &>div {
      display: inline-block;
      height: 100%;
    }
    .chartFirst {
      width: 32.5%;
      background: #fff;
      margin-right: 0.8%;
      margin-bottom: 10px;
    }
    .chartSec {
      width: 66.7%;
      background: #fff;
    }
  }
  .partThree {
    margin-bottom: 20px;
    .chartFirst:nth-child(3) {
      width: 33.4%;
      margin-right: 0;
    }
  }
}
.chartFirst {
  vertical-align: top;
}
</style>